<?php $this->beginClip('pagetitle'); ?>砸金蛋游戏<?php $this->endClip(); ?>
<?php $this->beginClip('js-files'); ?>
    <link rel="stylesheet" type="text/css" media="all" href="/resources/frontend/css/animate.min.css?a=<?php echo rand(); ?>" />
<?php $this->endClip(); ?>

<header class="page-header black" style="margin: 0;">
	<a href="<?php echo url('/activity/active', array('id_wxuser_mcard' => 1)); ?>">
		<span class="am-icon-chevron-left" id="btn-back" style="color: #FFF !important;"></span>
		<h1>砸金蛋</h1>
	</a>
</header>
<style>
    #page-wrapper {
        background: #5E0001;
    }
    html, body, div, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol{
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        font-size: 100%;
        vertical-align: baseline;
    }
    @media screen  and (max-width: 320px) {/* 设置中奖纪录iphone5的高度 */
        body .goldContent .goldEggsDiv .list_EggsDiv div ul li {
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
            float: left;
            position: relative;
            width: 33.3%;
            height: 60%;
            cursor: pointer;
        }
        .jiangPinResult.active {
            top: 50%;
            visibility: visible;
            width: 320px;
            height: 300px;
        }
    }   
    .smasheggs-1{
        top:60px;
        background-color:#000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        opacity:0.5; 
        display:block;
        color:white;
    }
    .smasheggs-2{
        top:90px;
        background-color:#000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        opacity:0.5; 
        display:block;
        color:white;
    }
    .record_line{
/*        background-color:#000;
        filter:alpha(opacity=50);
        -moz-opacity:0.3;
        opacity:0.3; */
        display:block;
        top:-28px;
    }
</style>

	<div class="goldContent">
        <div class="headPage">
			<img class="headPage_Img" src="/resources/frontend/images/indexPageImg.jpg" alt="砸金蛋" title="砸金蛋">
            <span class="smasheggs-1 prize-rule-reward" id="prize_rule">规则》</span>
            <a class="smasheggs-2 prize-rule-reward" href="<?php echo url('activity/PrizeRecord', array('id_wxuser_mcard' => 1,'id_onlineactivity'=>1,'onlineactivity_action'=>1)); ?>">记录》</a>
		</div>
        
		<div class="goldEggsDiv">
			<img class="centerPage_Img" src="/resources/frontend/images/indexPageImg2.png" alt="砸金蛋" title="砸金蛋">
            <!--<div style="position:absolute;width: 100%; top:0px;border: 1px solid;height: 30px;">-->
            <!--<span style="position:absolute;display: block;border:1px solid;top:0px;height: 30px;width: 50%;left:25%;text-align: center;line-height: 30px;font-size: 15px;">您还有2次砸蛋机会</span>-->
            <!--</div>-->
            <?php $this->renderPartial('./scrollmessage'); ?>
			<div class="list_EggsDiv"  id="carousel">
				<div>
					<ul class="jinDanUl" id="jinDanUl1">
                        <li><img class="animated bounceIn" src="/resources/frontend/images/egg.png" alt="egg1" title="快来砸我呀！"/></li>
						<li><img class="animated bounceIn" src="/resources/frontend/images/egg.png" alt="egg2" title="快来砸我呀！"/></li>
						<li><img class="animated bounceIn" src="/resources/frontend/images/egg.png" alt="egg3" title="快来砸我呀！"/></li>
					</ul>	
				</div>
	
				<div>
					<ul class="jinDanUl1" id="jinDanUl2">
						<li><img src="/resources/frontend/images/egg.png" alt="egg4" title="快来砸我呀！"/></li>
						<li><img src="/resources/frontend/images/egg.png" alt="egg5" title="快来砸我呀！"/></li>
						<li><img src="/resources/frontend/images/egg.png" alt="egg6" title="快来砸我呀！"/></li>
					</ul>	
				</div>
			</div>
		</div>       
	</div>
<div class="activitycash" style="display: none;">12</div>
<div class="activitycredits" style="display: none;">12</div>

<div class="remaincash" style="display: none;">11</div>
<div class="remaincredits" style="display: none;">1</div>

<div class="activitycount" style="display: none;">3</div>

<script type="text/javascript">
	var t = setInterval(function() {
				carouselAutoPlay();
			},5000);
    var carouselAutoPlay= function(){
    var width = $('.list_EggsDiv').width();
    $(".list_EggsDiv ul").eq(0).animate({left:'-'+width},1200,function(){
        $(this).css({
            left: width,
            zIndex: 0
            }).parent().appendTo($('.list_EggsDiv'));
        }).parent().next().find('ul').animate({left:0},1200);
    };

    $('body').on('tap','.list_EggsDiv ul li',function(){
        var activitycash = $(".activitycash").text();
        var activitycredits = $(".activitycredits").text();
        var remaincash = $(".remaincash").text();
        var remaincredits = $(".remaincredits").text();
        var activitycount = $(".activitycount").text();
        if(activitycash>0 && activitycredits>0){
            var remaincash = remaincash - activitycash;
            var remaincredits = remaincredits - activitycredits;
            
            if(remaincash<0){
                alert("余额不足");
                return false;
            }
            if(remaincredits<0){
                alert("积分不足");
                return false;
            }
        }
        
        if(activitycash>0 && activitycredits == '0'){
            var remaincash = remaincash - activitycash;
            if(remaincash<0){
                alert("余额不足");
                return false;
            }
        }
        
        if(activitycredits>0 && activitycash == '0'){
            var remaincredits = remaincredits - activitycredits;
            if(remaincredits<0){
                alert("积分不足");
                return false;
            }
        }
        if(activitycount > 0){
            $(".activitycount").html(activitycount-1);
            $(".remaincredits").html(remaincredits);
            $(".remaincash").html(remaincash);
            
        }else{
            alert("今天活动参与完毕");
            return false;
        }     
        clickJinDanView();           
   
    });	
	var clickJinDanView = function(){
		var str = '';
		str += '<div class="bg-mask"></div>';
		str +='<div class="chouJiang">';
		str +='<p class="chouJiangTishi">请稍等...</p>';
		str +='<img class="caiDai" src="/resources/frontend/images/caidai.png" alt="彩带">';
		str +='<img class="imgDan" src="/resources/frontend/images/egg.png" alt="砸蛋" title="砸蛋">';
		str +='<img class="imgChuiZi" src="/resources/frontend/images/chuizi.png" alt="锤子">';
		str +='</div>';

		$('body').css({'overflow':'hidden'});
		$('body').prepend(str);
        $.ajax({
            type: 'get', 
            url: '/activity/prize', 
            data: {
                id_wxuser_mcard: '1',
                id_onlineactivity: '1'
            }, 
            error:function(){
                alert('系统超时');
                // window.location.reload();
            },
            success: function(rets){
                $('.bg-mask').remove();
                $('.chouJiang').remove();
                jiangPinResult(1);
            },
            dataType: 'json'
        });
	};

    var jiangPinResult = function(res){
        var prize = res;
        var prizeStr = '<p>'+prize+'</p>';
		var str = '';
		str += '<div class="bg-mask"></div>';
		str +='<div class="jiangPinResult">';
		str +='<img class="gongxi" src="/resources/frontend/images/gx.png" alt="恭喜你" title="恭喜">';
		str += prizeStr;
		str +='<img class="imgJiangPin" src="/resources/frontend/images/jiangpin.png" alt="奖品" title="奖品">';
		str +='<a href="#"><input class="btn_Get" value="领取奖品" type="button"></a>';
		str +='<img class="colseJiangPin" src="/resources/frontend/images/close.png" alt="关闭" title="关闭">';
		str +='</div>';
        
		$('body').css({'overflow':'hidden'});
		$('body').prepend(str);

		setTimeout(function(){
			$('.jiangPinResult').addClass('active');
		},200);
	};
        $('body').on('tap','.colseJiangPin',function(){
            $('.bg-mask').remove();
            $('.jiangPinResult').remove();
            $('body').css({"overflow":"visible"});
        });
 
</script>
